<template>
	<view class="container">
		<view class="title">数量统计</view>
		<view class="achieve">
			<view class="order bg-abstract">
				<view class="label">
					<u-icon class="icon" size="30" color="#fff" name="order" />总订单数
				</view>
				<view class="count">{{total.OrderCount}} 单</view>
			</view>
			<view class="sale bg-abstract">
				<view class="label">
					<u-icon class="icon" size="30" color="#fff" name="shopping-cart" />总销售额
				</view>
				<view class="money">{{total.OrderMoney}} 元</view>
			</view>
			<view class="profit bg-abstract">
				<view class="label">
					<u-icon class="icon" size="30" color="#fff" name="man-add" />总客户量
				</view>
				<view class="money">{{total.BusinessCount}} 个</view>
			</view>
		</view>
		<view class="title">客户分析</view>
		<!-- <qiun-title-bar title="客户分析"/> -->
		<view class="ChartsBox">
			<qiun-data-charts type="column" :opts="Businessopts" :chartData="BusinessData" />
		</view>
		<view class="title">回访分析</view>
		<view class="ChartsBox">
			<qiun-data-charts type="line" :opts="VisitOpts" :chartData="VisitData" />
		</view>
		<view class="title">领取分析</view>
		<view class="ChartsBox">
			<qiun-data-charts type="line" :opts="ReceiveOpts" :chartData="ReceiveData" />
		</view>
		<view class="title">订单分析</view>
		<view class="ChartsBox">
			<qiun-data-charts type="mount" :opts="OrderOpts" :chartData="OrderData" />
		</view>
		<view class="title">来源分析</view>
		<view class="ChartsBox">
			<qiun-data-charts type="pie" :opts="SourceOpts" :chartData="SourceData" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				BusinessData: {},
				// ucharts配置
				Businessopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				VisitData: {},
				VisitOpts: {
					color: ["#EE6666"],
					padding: [15, 10, 0, 15],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				ReceiveOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				ReceiveData: {},
				OrderOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						mount: {
							type: "mount",
							widthRatio: 1.5
						}
					}
				},
				OrderData: {},
				SourceOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				SourceData: {},
				total: {
					OrderCount: 0,
					OrderMoney: 0,
					BusinessCount: 0
				},
				month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			}
		},
		onReady() {
			this.getTotalData()

			this.getBusinessData()

			this.getVisitData()

			this.getReceiveData()

			this.getOrderData()

			this.getSourceData()
		},
		methods: {
			async getTotalData()
			{
				let result = await this.$u.api.index.total()

				if(result.code === 1)
				{
					this.total = result.data
				}
			},
			async getBusinessData()
			{
				let result = await this.$u.api.index.business()

				// 模拟从服务器获取数据的延迟
				setTimeout(() => {
					// 模拟从服务器返回数据，如果数据格式跟标准格式不同，需要自行对格式拼接
					let res = {
						// 图表数据表
						categories:this.month,
						// 数据集
						series:[
							{
								name:'未认证',
								data:result.data.noCertified
							},
							{
								name:'已认证',
								data:result.data.Certified
							}
						]
					}

					this.BusinessData = JSON.parse(JSON.stringify(res))
				});
			},
			async getVisitData()
			{
				let result = await this.$u.api.index.visit()

				setTimeout(() => {
					let res = {
						categories:this.month,
						series:[{
							name:'回访统计',
							data:result.data
						}]
					}	

					this.VisitData = JSON.parse(JSON.stringify(res))
				});

			},
			async getReceiveData()
			{
				let result = await this.$u.api.index.receive()

				setTimeout(() => {
					let res = {
						categories:this.month,
						series:[
							{
								name:'申请',
								data:result.data.apply
							},
							{
								name:'分配',
								data:result.data.allot
							},
							{
								name:'回收',
								data:result.data.recovery
							}
						]
					}

					this.ReceiveData = JSON.parse(JSON.stringify(res))
				});
			},
			async getOrderData()
			{
				let result = await this.$u.api.index.order()

				setTimeout(() => {

					let res = {
						series:[{
							data:result.data
						}]
					}

					this.OrderData = JSON.parse(JSON.stringify(res))

				});
			},
			async getSourceData()
			{
				let result = await this.$u.api.index.source()

				setTimeout(() => {

					let res = {
						series:[{
							data:result.data
						}]
					}

					this.SourceData = JSON.parse(JSON.stringify(res))

				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 0px 10px;
	}

	.title {
		font-weight: bold;
		font-size: 15px;
		padding: 15px 0px;
	}

	.achieve {
		height: 100px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
	}

	.achieve .order,
	.achieve .sale,
	.achieve .profit,
	.global .visitor,
	.global .order,
	.global .sale {
		position: relative;
		height: 100%;
		border-radius: 4px;
		width: 32%;
	}

	.achieve .order {
		background-color: #3c9cff;
	}

	.achieve .sale {
		background-color: #f9ae3d;
	}

	.achieve .profit {
		background-color: #5ac725;
	}

	.achieve .count,
	.global .count {
		font-size: 14px;
		font-weight: bold;
		position: absolute;
		right: 10px;
		bottom: 10px;
	}

	.achieve .money,
	.global .money {
		font-size: 14px;
		font-weight: bold;
		position: absolute;
		right: 10px;
		bottom: 10px;
	}

	.money::before {
		content: "¥";
		margin-right: 2px;
		font-weight: normal;
		font-size: 14px;
	}

	.achieve .label,
	.global .label {
		font-size: 14px;
		position: absolute;
		top: 10px;
		left: 10px;
		text-align: center;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.achieve .label .icon,
	.global .label .icon {
		margin-right: 4px;
	}

	.ChartsBox {
		width: 100%;
		height: 300px;
	}
</style>
